import React from "react"
import getInfo2 from "./Info.module.css"
import {Button,WhiteSpace,List,Flex} from "antd-mobile"
import {getDetail,Logout,getDetail1} from "./api/index"
import {withRouter} from "react-router-dom"

const Item = List.Item
@withRouter
class Info extends React.Component{
    constructor(props){
        super(props)
        // this.state=[]
        this.state={
            User:[],
            uid:'',
            avatarUrl:'',
            nickname:'',
            Grade:'',
            eventCount:'',
            follows:'',
            followeds:''
        }
    }
    componentDidMount(){
        let uid1 = localStorage.getItem('uId')
        console.log(uid1)
        getDetail1(uid1).then(body=>body.json())
        .then(res=>{
            console.log(res)
            let {profile} = res
            this.setState({
                Grade:res.level,
                avatarUrl : profile.avatarUrl,
                nickname : profile.nickname,
                uid :profile.userId,
                eventCount :profile.eventCount,
                follows : profile.follows,
                followeds : profile.followeds
            })
            console.log(this.state)
        })
    }
    login(){
        console.log(123)
        console.log(this.props)
        localStorage.removeItem('uId')
        this.props.history.push('/login')
        Logout()
        .then(body=>body.json())
        .then(
            res=>{
                if(res.code===200){
                  //cookie缓存修正
                  document.cookie = 'MUSIC_U=1;expires=-1';
                    console.log('退出成功')
                }
            }
        )       
    }
    CaiLing(){
        console.log(this.props.history)
        this.props.history.push('/cailing')
    }
    Dongtai(){
        this.props.history.push('/dongtai?uid='+this.state.uid)
    }
    Guanzhu(){
        console.log(this.props)
        this.props.history.push('/guanzhu')
    }
    Infromation(){
        this.props.history.push('/information')
    }
    Fensi(){
        this.props.history.push('/fensi')
    }
    personHome(){
        this.props.history.push('/person?id='+this.state.uid)
    }
    render(){
        return(
            <div className={getInfo2.my}>
                <div className={getInfo2.top}>
                    <div className={getInfo2.Header}>
                        <img src={require('./img/扫一扫.png')}/>
                        <img src={require('./img/音乐.png')}/>
                    </div>
                    <div className={getInfo2.Name}>
                        <div className={getInfo2.Headportrait}>
                                <img src={this.state.avatarUrl} alt="" onClick={this.personHome.bind(this)}/>
                        </div>
                        <div className={getInfo2.Name1}>
                            <span>{this.state.nickname}</span>
                            <div className={getInfo2.grade}>
                                Lv.{this.state.Grade}
                            </div>
                        </div>
                        <div className={getInfo2.SignIn}>
                            <div>
                                <img src={require('./img/钱.png')} alt=""/>
                                <p>签到</p>
                            </div>
                            
                        </div>
                    </div>
                    <div className='flex-container'>
                        <Flex>
                            <Flex.Item onClick={this.Dongtai.bind(this)}><p>{this.state.eventCount}</p><p>动态</p></Flex.Item>
                            <Flex.Item onClick={this.Guanzhu.bind(this)}><p>{this.state.follows}</p><p>关注</p></Flex.Item>
                            <Flex.Item onClick={this.Fensi.bind(this)}><p>{this.state.followeds}</p><p>粉丝</p></Flex.Item>
                            <Flex.Item onClick={this.Infromation.bind(this)}><img src={require('./img/编辑.png')} alt=""/><p>编辑资料</p></Flex.Item>
                        </Flex>
                    </div>
                </div>
                <div className={getInfo2.bottom}>
                    <div className={getInfo2.center}>
                        <div className={getInfo2.msg}>
                            <img src={require('./img/消息.png')} alt=""/>
                            <p>消息</p>
                        </div>
                        <div className={getInfo2.msg}>
                            <img src={require('./img/商城.png')} alt=""/>
                            <p>商城</p>
                            <p className={getInfo2.msg6}>真无线129元</p>
                        </div>
                        <div className={getInfo2.msg}>
                            <img src={require('./img/演出.png') } alt=""/>
                            <p>演出</p>
                            <p className={getInfo2.msg6}>落日飞车</p>
                        </div>
                        <div className={getInfo2.msg}>
                            <img src={require('./img/个性装扮.png')} alt=""/>
                            <p>个性装扮</p>
                        </div>
                    </div>
                    <WhiteSpace></WhiteSpace>
                    <div className={getInfo2.footer}>
                        <List>
                        <Item
                        thumb={require('./img/彩铃.png')}
                        arrow="horizontal"
                        onClick={this.CaiLing.bind(this)}
                        >口袋彩铃</Item>
                        <WhiteSpace></WhiteSpace>
                        <Item
                        thumb={require("./img/订单.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        我的订单
                        </Item>
                        <Item
                        thumb={require('./img/灯泡.png')}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        创作者中心
                        </Item>
                        <Item
                        thumb={require("./img/设置.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        设置
                        </Item>
                        <Item
                        thumb={require("./img/夜间模式.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        夜间模式
                        </Item>
                        <Item
                        thumb={require("./img/定时关闭.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        定时关闭
                        </Item>
                        <Item
                        thumb={require("./img/闹钟.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        音乐闹钟
                        </Item>
                        <Item
                        thumb={require("./img/在线听歌免流量 - 网易icon.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                       在线听歌免流量
                        </Item>
                        <Item
                        thumb={require("./img/优惠卷.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        优惠劵
                        </Item>
                        <Item
                        thumb={require("./img/侧边栏_青少年模式_44.png")}
                        onClick={() => {}}
                        extra='未开启'
                        >
                        青少年模式
                        </Item>
                        <Item
                        thumb={require("./img/分 享.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        分享网易云音乐
                        </Item>
                        <Item
                        thumb={require("./img/关于.png")}
                        onClick={() => {}}
                        arrow="horizontal"
                        >
                        关于
                        </Item>
                        </List>
                        <WhiteSpace></WhiteSpace>
                        <Button onClick={this.login.bind(this)}>退出登录</Button>
                    </div>
                    
                </div>
            </div>
        )
    }
}
export default Info